import { formatFileSize } from '@/utils'
export default {
  props: {
    fileList: {
      type: [String, Object, Array]
    },
    action: {
      type: String,
      default: `${process.env.VUE_APP_BASE_API}/attachs/upload`
    },
    showRemove: {
      type: Boolean,
      default: true
    },
    drag: {
      type: Boolean,
      default: false
    },
    tips: {
      type: String,
      default: ''
    },
    limit: {
      type: Number,
      default: 1
    },
    ratio: {
      type: Number,
      default: 1
    },
    width: {
      type: [Number, String],
      default: ''
    },
    visibleInfo: {
      type: Boolean,
      default: false
    },
    accept: {
      type: [Array, String],
      default: 'image/jpeg, image/gif, image/png, image/bmp'
    },
    channel: {
      type: String,
      default: ''
    },
    multiple: {
      type: Boolean,
      default: false
    },
    maxAllowFileSize: {
      type: [Number, String],
      default: 1024 * 1024
    }
  },
  inject: ['uploadAction', 'uploadOptions'],
  watch: {
    fileList: {
      handler(value) {
        console.log('Upload fileList is changed:', value)
        this.$emit('change', value)
      },
      deep: true
    },
    fileInfo: {
      handler(value) {
        console.log('Upload fileInfo is changed.', value)
        this.$emit('change', value.url)
      },
      deep: true
    }
  },
  data() {
    return {
      fileInfo: null,
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      lazyLoading: false,
      headers: {
        Authorization: ''
      },
      appendParams: {
        scope: 'default'
      }
    }
  },
  computed: {
    fileData: {
      get() {
        const data = this.formatFileDataObject(this.fileList)
        return data || null
      },
      set(val) {
        console.log('Upload fileData is changed:', val)
        this.$emit('change', val.url)
      }
    },
    disableUpload() {
      return this.fileList.length >= this.uploadOptions.limit
    },
    acceptData() {
      var accepts = this.accept
      if (this.isArray(accepts)) {
        return accepts.join(', ')
      } else {
        return accepts
      }
    }
  },
  methods: {
    formatFileDataObject(value) {
      var fitem = value
      if (this.isArray(value)) {
        fitem = value[0]
      }
      if (this.isObject(fitem)) {
        return fitem
      } else {
        return {
          url: fitem
        }
      }
    },
    isObject(value) {
      return typeof value === 'object' && value.constructor === Object
    },
    isArray(value) {
      if (Array.isArray || typeof Array.isArray === 'function') {
        return Array.isArray(value)
      } else {
        return value instanceof Array || Object.prototype.toString.call(value) === '[object Array]'
      }
    },
    onExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 ${this.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      )
    },
    onUpload(file) {
      console.log('method onUpload at upload mixins.')
      const formData = new FormData()
      formData.append('file', file.file)
      this.uploadAction(formData).then(res => {
        this.handleSuccess(res, file)
      })
    },
    handleRemoveFile(file, fileList) {
      console.log('remove file:', file)
      console.log('remove after fileList:', fileList)
      // this.fileList = [...fileList]
      this.$emit('remove', file, fileList)
    },
    handleRemove(index) {
      if (this.isArray(this.fileList)) {
        this.fileList.splice(index, 1)
      } else {
        this.fileData = { ...this.fileData, url: '' }
      }
    },
    handlePreview(file, index) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleSuccess(res, file) {
      const { data } = res
      const fileInfo = file.file
      var temp = { ...fileInfo, ...data }
      if (this.isArray(this.fileList)) {
        this.$set(this.fileList, this.fileList.length, temp)
      } else {
        this.fileData = temp
      }
    },
    beforeUpload(file) {
      const overflowSize = this.maxAllowFileSize < file.size // 这里做文件大小限制
      var maxAllowSize = formatFileSize(this.maxAllowFileSize, 0)
      if (overflowSize) {
        this.$message({
          message: `上传文件大小不能超过 ${maxAllowSize}!`,
          type: 'warning'
        })
      }
      return !overflowSize
    },
    handleMark(val) {},
    handleDownload(file) {
      console.log(file)
    }
  }
}
